<!--http://jschr.github.io/bootstrap-modal/-->
<form action="#" class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">单个弹出框</label>

            <div class="col-md-8">
                <button type="button" class="btn green" ng-click="modal.show()"><i class="fa fa-save"></i> 弹出</button>
                <div ed-modal="modal" data-options="title: '弹出框演示', icon: 'fa-plus', width: 760, onShow: function() {alert('显示了')}, onOkClick: function() {alert('您点击了确定');}, onHidden: function(){alert('关闭了');}">
                    <div>
                        我是一个弹出框，通过data-options="title: '弹出框演示', icon: 'fa-plus', width: 760, onOkClick: function() {alert('您点击了确定');}, onHidden: function(){alert('关闭了');}"
                        弹出框演示'来设置属性：标题、图标、宽度、事件
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr/>

    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">失去焦点不允许关闭</label>

            <div class="col-md-8">
                <button type="button" class="btn green" ng-click="modal1.show()"><i class="fa fa-save"></i> 弹出</button>
                <div ed-modal="modal1" data-options="title: '弹出框演示1', icon: 'fa-plus', static: true">
                    <div>
                        失去焦点我不会关闭哦！static=true
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr/>

    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">嵌套</label>

            <div class="col-md-8">
                <button type="button" class="btn green" ng-click="modal2.show()"><i class="fa fa-save"></i> 弹出</button>
                <div ed-modal="modal2" data-options="title: '人员选择'">
                    <div style="width: 500px">
                        <button type="button" class="btn green" ng-click="modal3.show();"><i class="fa fa-save"></i> 提交2</button>
                        <div ed-modal="modal3" data-options="title: '人员选择2'">
                            <table ed-grid="userGrid" class="table table-striped table-bordered table-advance table-hover"
                                   ed-url="user/query.do" ed-model="user" width="500px">
                                <thead>
                                <tr>
                                    <th ed-data="_index"></th>
                                    <th ed-data="userCode">用户名</th>
                                    <th ed-data="userName">用户姓名</th>
                                    <th ed-data="gender | code : 'gender'">性别</th>
                                    <th ed-data="telephone">手机号码</th>
                                    <th ed-data="userState | code : 'userstate'">状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr/>

    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">Long Modals</label>

            <div class="col-md-8">
                <button type="button" class="btn green" ng-click="modal3.show()"><i class="fa fa-save"></i> 弹出</button>
                <div ed-modal="modal3" data-options="title: '弹出框演示1', icon: 'fa-plus'">
                    <div style="height: 800px">我是个很高很高的弹框</div>
                </div>
            </div>
        </div>
    </div>

    <hr/>

    <div class="form-body">
        <div class="form-group">
            <label class="col-md-3 control-label">jquery-ui dialog</label>

            <div class="col-md-4">
                <button type="button" class="btn green" ng-click="dialog.show()"><i class="fa fa-save"></i> 弹出</button>
                <div ed-dialog="dialog" data-options="title: '我是个jquery-ui的弹框'">
                    <div>
                        <p>ed-dialog的data-options参数接收jquery-ui dialog原生设置</p>
                        <p><span style="color: red">注：</span>jquery-ui dialog原生的按钮buttons无法使用$scope，按钮需要自己添加</p>
                        <input type="text" class="form-control" ng-model="dialogContent"/>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" ng-model="dialogContent"/>
            </div>
        </div>
    </div>

</form>